<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
    	作者：zyl
    	时间：2017-05-27
    	描述： canvas clip() 方法
定义和用法
clip() 方法从原始画布中剪切任意形状和尺寸。
提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。
您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。  
JavaScript 语法：
context.clip();
    -->
	<body>
		<canvas id="canvas" style="border: 2px solid #ccc; display: block;margin: 50px auto;">	
			qw
		</canvas>
	</body>
	<script>
	
			var canvas = document.getElementById("canvas");
			canvas.width =800;
	        canvas.height =800;
			 var context = canvas.getContext("2d");//2d环境
			
		 context.beginPath();
		 context.fillStyle="#000000";
		 context.fillRect(0,0,canvas.width,canvas.height);
		 
			 context.beginPath();
			context.arc(400,400,150,0,Math.PI*2);
			context.fillStyle="aliceblue";
			context.fill();
			 context.clip();//以这个圆为新的背景
			 
			
			 context.font="bold 150px Arial";
			 context.textAlign="center";
			 context.textBaseline="midddle";
			 context.fillStyle="red";
			 context.fillText("cancas文字",400,400);//我的chrome看不大文字???
	
////////////////////////////////////////
		/*	var c=document.getElementById("canvas");
			var ctx=c.getContext("2d");
			// 剪切矩形区域
			ctx.rect(50,20,200,120);//新的绘制环境
			ctx.stroke();
			ctx.clip();
			// 在 clip() 之后绘制绿色矩形
			ctx.fillStyle="green";
			ctx.fillRect(0,0,150,100);*/
	</script>
</html>
